<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>03使用服务端字体</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>

        h1{
            margin: .3em;
        }
        @font-face {/*常规*/
            font-family: myWebFont;
            src: url('fontin_sans_R_45b.otf') format("opentype");
        }
        @font-face {/*粗体*/
            font-family: myWebFont;
            src: url('fontin_sans_b_45b.otf') format("opentype");
            /*font-weight: bold;*/
        }
        @font-face {/*斜体*/
            font-family: myWebFont;
            src: url('fontin_sans_I_45b.otf') format("opentype");
            font-style: italic;
        }
        @font-face {/*粗斜体*/
            font-family: myWebFont;
            src: url('fontin_sans_bi_45b.otf') format("opentype");
            font-weight: bold;
            font-style: italic;
        }
        @font-face {/*胡敬礼毛笔繁体字*/
            font-family: myWebFont—hjlft;
            src: url('HuJingliFanti.TTF');
        }
        @font-face {/*钟齐孟宪敏钢笔简体*/
            font-family: myWebFont—zqmxmPenSimple;
            src: url('zqmxmPenSimple.TTF');
        }

        @font-face {/*苹方准简体*/
            font-family: pf_hei_zhun_jian;
            src: url('pf_hei_zhun_jian.TTF');
        }
        @font-face {/*苹方极细体*/
            font-family: pf_hei_jixi_jian;
            src: url('pf_hei_jixi_jian.TTF');
        }

        [id^=myfont] *{
            font-family:myWebFont, sans-serif;
            font-weight: normal;
        }
        [id^=myfont] h1{
            font-size: 2em;
        }
        #myfontR *{
            font-weight: normal;
            font-style:normal;
        }
        #myfontB *{
            font-style: normal;
            font-weight: bold;
        }
        #myfontI *{
            font-style: italic;
            font-weight: normal;
        }
        #myfontIB *{
            font-style: italic;
            font-weight: bold;
        }
        #myfontHjlft *{
            /*font-family: myWebFont—hjlft sans-serif;*//*真奇怪，明明前面的字体存在，还要受到最后面的类型的影响！*/
            font-family: myWebFont—hjlft, serif;
        }
        #myfontZqmxmPenSimple *{
            font-family: myWebFont—zqmxmPenSimple, serif;
        }
        #pf_hei_zhun_jian *{
            font-family: pf_hei_zhun_jian, serif;
        }
        #pf_hei_jixi_jian *{
            font-family: pf_hei_jixi_jian, serif;
        }
        #pf_hei_zhun_jian .yahei,
        #pf_hei_jixi_jian .yahei {
            font-family: '微软雅黑', sans-serif;
        }
    </style>
</head>
<body>
<h1>3-3使用服务端字体</h1>
<h2 class="problem">服务器添加了苹果的苹方字体，但本机上若干浏览器却如何也显示不出来，后来试了别人的windows，苹果，以及我的安卓手机却都能显示，不知原因何在！</h2>
<h2 class="problem">不知为何默认的英文字体会看起来变粗？跟加粗的效果一样？？经测试实际上是不带加粗信息的！</h2>
<h2 class="problem">不写加粗会自动加粗，但不写斜体不会自动变斜！</h2>
<h2 class="problem">多个字体之间一定要用逗号隔开!</h2>
<h3>字体定义（同一种字体的常规、粗体、斜体、粗斜体要分别定义）</h3>
<code>
    @font-face {/*fontinSansCR常规*/
        font-family: myWebFont;
        src: url('fontinSansCR-Bold.otf') format("opentype");
        font-weight: normal;
    }
    @font-face {/*fontinSansCR斜体*/
        font-family: myWebFont;
        src: url('fontinSansCR-Bold.otf') format("opentype");
        font-style: italic;
    }
    @font-face {/*fontinSansCR粗体*/
        font-family: myWebFont;
        src: url('fontinSansCR-Bold.otf') format("opentype");
        font-weight: bold;
    }
    @font-face {/*fontinSansCR粗斜体*/
        font-family: myWebFont;
        src: url('fontinSansCR-Bold.otf') format("opentype");
        font-weight: bold;
        font-style: italic;
    }
    @font-face {/*胡敬礼毛笔繁体字*/
    font-family: myWebFont—hjlft;
    src: url('HuJingliFanti.TTF');
    }
    @font-face {/*钟齐孟宪敏钢笔简体*/
    font-family: myWebFont—zqmxmPenSimple;
    src: url('zqmxmPenSimple.TTF');
    }
    @font-face {
    font-family: pf_hei_zhun_jian;
    src: url('pf_hei_zhun_jian.TTF');
    }

</code>
<br>
<code>
    [id^=myfont] *{
        font-family:myWebFont, sans-serif;
    }</code>
<h3>web字体_正常</h3>
<code>
    #myfont *{
        font-style: normal;
        font-weight: normal;
    }

</code>
<section id="myfontR">
   <h1>Cascading Style Sheets</h1>
   <h1>这是h1标题</h1>
    <address>this page point to the
    <a href="http://e-art.taobao.com">新e风艺术工作室</a>
    </address>
</section>

<h3>web字体_粗体</h3>
<code>
    #myfontB *{
        <!--font-style: normal;-->
        font-weight: bold;
    }
</code>

<section id="myfontB">
   <h1>Cascading Style Sheets</h1>
   <h1>这是h1标题</h1>
    <address>this page point to the
    <a href="http://e-art.taobao.com">新e风艺术工作室</a>
    </address>
</section>

<h3>web字体_斜体</h3>
<code>
    #myfontI *{
        font-style: italic;
        font-weight: normal;
    }
</code>
<section id="myfontI">
    <h1>Cascading Style Sheets</h1>
    <h1>这是h1标题</h1>
    <address>this page point to the
        <a href="http://e-art.taobao.com">新e风艺术工作室</a>
    </address>
</section>

<h3>web字体_粗斜体</h3>
<code>
    #myfontIB *{
        font-style: italic;
        font-weight: bold;
    }
</code>
<section id="myfontIB">
   <h1>Cascading Style Sheets</h1>
   <h1>这是h1标题</h1>
    <address>this page point to the
    <a href="http://e-art.taobao.com">新e风艺术工作室</a>
    </address>
</section>

<h3>web字体_胡敬礼毛笔繁体</h3>
<code>
    #myfontHjlft *{
        font-family: myWebFont—hjlft, serif;
    }
</code>
<section id="myfontHjlft">
   <h1>Cascading Style Sheets</h1>
   <h1>这是h1标题</h1>
   <h1>这是来自于服务器的字体——胡敬礼毛笔繁体</h1>
    <address>this page point to the
    <a href="http://e-art.taobao.com">新e风艺术工作室</a>
    </address>
</section>

<h3>web字体_钟齐孟宪敏钢笔简体</h3>
<code>
    #myfontZqmxmPenSimple *{
        font-family: myWebFont—zqmxmPenSimple, serif;
    }
</code>
<section id="myfontZqmxmPenSimple">
   <h1>Cascading Style Sheets</h1>
   <h1>这是h1标题</h1>
   <h1>这是来自于服务器的字体——钟齐孟宪敏钢笔简体</h1>
    <address>this page point to the
    <a href="http://e-art.taobao.com">新e风艺术工作室</a>
    </address>
</section>

<h3>web字体_苹方黑准简体</h3>
<code>
    #pf_hei_zhun_jian *{
        font-family: pf_hei_zhun_jian, serif;
    }
</code>
<section id="pf_hei_zhun_jian">
   <h1>Cascading Style Sheets</h1>
   <h1>这是h1标题</h1>
   <h1>这是来自于服务器的字体——钟齐孟宪敏钢笔简体</h1>
   <h1 class="yahei">这是来自于服务器的字体——钟齐孟宪敏钢笔简体(微软雅黑)</h1>
    <address>this page point to the
    <a href="http://e-art.taobao.com">新e风艺术工作室</a>
    </address>
</section>

<h3>web字体_苹方黑极细简体</h3>
<code>
    #pf_hei_jixi_jian *{
        font-family: pf_hei_jixi_jian, serif;
    }
</code>
<section id="pf_hei_jixi_jian">
   <h1>Cascading Style Sheets</h1>
   <h1>这是h1标题</h1>
   <h1>这是来自于服务器的字体——钟齐孟宪敏钢笔简体</h1>
   <h1 class="yahei">这是来自于服务器的字体——钟齐孟宪敏钢笔简体(微软雅黑)</h1>
    <address>this page point to the
    <a href="http://e-art.taobao.com">新e风艺术工作室</a>
    </address>
</section>

</body>
</html>